<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-12 09:15:49
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-09-13 17:20:46
 * @FilePath: \jzjypc4.0\src\views\ResourceCenter\beikeziyuan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 备课资源包页 -->
  <div id="container">
    <div class="top">
      <div class="bread">
        <span class="nowAdreess">当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="isSearch">{{
            routeName
          }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: routeurl+'?from=res'+'&Top=' + gundongTop}" v-if="!isSearch">{{routeName}}</el-breadcrumb-item> -->
          <el-breadcrumb-item :to="{ path: fromPath }" v-if="bigTapName">{{
            bigTapName
          }}</el-breadcrumb-item>
          <!-- 同步资源 -->
          <el-breadcrumb-item :to="{ path: bookurl }" v-if="bookTitle">{{
            bookTitle
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: mulu1url }" v-if="mulu1title">{{
            mulu1title
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: mulu2url }" v-if="mulu2title">{{
            mulu2title
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: mulu3url }" v-if="mulu3title">{{
            mulu3title
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: fenleiurl }" v-if="fenleiTitle">{{
            fenleiTitle
          }}</el-breadcrumb-item>
          <!-- 试卷 -->
          <el-breadcrumb-item :to="{ path: sjFlurl }" v-if="sjFlTitle">{{
            sjFlTitle
          }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: sjNjurl}" v-if="sjNjTitle">{{ sjNjTitle }}年级</el-breadcrumb-item> -->
          <el-breadcrumb-item :to="{ path: sjDqurl }" v-if="sjDqTitle">{{
            sjDqTitle
          }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: sjNfurl}" v-if="sjNfTitle">{{ sjNfTitle }}年份</el-breadcrumb-item> -->
          <!-- 素材 -->
          <el-breadcrumb-item :to="{ path: scFlurl }" v-if="scFlTitle">{{
            scFlTitle
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: scTimeurl }" v-if="scTimeTitle">{{
            scTimeTitle
          }}</el-breadcrumb-item>

          <el-breadcrumb-item
            ><p>{{ title }}</p></el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="beikeziyuan">
        <div class="beike">
          <img src="../../assets/img/resFile (4).png" />
          <div class="details">
            <div class="title">
              <span v-if="is_tj == 1">推荐</span>
              <img src="../../assets/img/ffzyb/vip.png" v-show="is_sf == 1" />
              <h3>{{ title }}</h3>
              <!-- <div class="money" v-if="is_sf == 0">免费</div>
              <div class="money" v-if="is_sf == 1 && gm_status == 0"><img src="../../assets/img/money.png">付费资源</div>
              <div class="money" v-if="is_sf == 1 && gm_status == 1"><img src="../../assets/img/money.png">已解锁</div> -->
            </div>
            <div class="msg">
              <div v-if="kjlist.length>5"><p v-for="item in kjlist.slice(0,5)" :key="item.id" >{{ item.title }}</p></div>
              <p v-for="item in kjlist" :key="item.id" v-show="kjlist.length<=5">{{ item.title }}</p>
              <p v-show="kjlist.length>5">...</p>
              <div class="bottom">
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ view_nums }}</span
                >
                <span class="recNum"
                  >共<a>{{ kjlist.length }}</a
                  >份资源</span
                >
                <span v-if="pswd && loginStatus == 1"
                  >文件编辑密码: {{ pswd }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="collect" v-if="sc_status == 0" @click="getCollect">
          <i class="el-icon-star-off"></i>
          <p>收藏本资源包</p>
        </div>
        <div class="collect getsc" v-if="sc_status == 1" @click="cancelCollect">
          <i class="el-icon-star-on"></i>
          <p>已收藏</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title1">
        <p>包内资源</p>
        <span>{{ kjlist.length }}份</span>
      </div>
      <div class="box">
        <div class="left">
          <!-- <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            class="quanxuan"
            ><span v-trigger>全选</span></el-checkbox
          > -->
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
              <template slot="title">
                <p class="jiaoyanClass">资源包课件</p>
                <span v-show="!collapseFlag">收起</span>
                <span v-show="collapseFlag">展开</span>
              </template>
              <div>
                <el-checkbox-group
                  v-model="checkedClass"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox
                    v-for="item in kjlist"
                    :label="item"
                    :key="item.id"
                    :class="{ choseKj: wenjianid == item.id }"
                  >
                    <img
                      src="../../assets/img/resFile (1).png"
                      alt="file_url"
                      v-if="
                        item.group_ext == 'ppt' ||
                        item.group_ext == 'pptx' ||
                        item.group_ext == 'ppsx' ||
                        item.group_ext == 'pps'
                      "
                    />
                    <img
                      src="../../assets/img/resFile (2).png"
                      alt="file_url"
                      v-if="item.group_ext == 'mp4' || item.group_ext == 'rm'"
                    />
                    <img
                      src="../../assets/img/resFile (3).png"
                      alt="file_url"
                      v-if="item.group_ext == 'xls' || item.group_ext == 'xlsx'"
                    />
                    <img
                      src="../../assets/img/resFile (4).png"
                      alt="file_url"
                      v-if="item.group_ext == 'zip' || item.group_ext == 'rar'"
                    />
                    <img
                      src="../../assets/img/resFile (5).png"
                      alt="file_url"
                      v-if="item.group_ext == 'm4a' || item.group_ext == 'mp3'"
                    />
                    <img
                      src="../../assets/img/resFile (6).png"
                      alt="file_url"
                      v-if="item.group_ext == 'doc' || item.group_ext == 'docx'"
                    />
                    <img
                      src="../../assets/img/resFile (7).png"
                      alt="file_url"
                      v-if="item.group_ext == 'pdf'"
                    />
                    <img
                      src="../../assets/img/resFile (8).png"
                      alt="file_url"
                      v-if="item.group_ext == 'png' || item.group_ext == 'jpg'"
                    />
                    <div
                      class="msg"
                      @click.prevent="choseKj(item.title, item.id,item.file_ext)"
                    >
                      {{ item.title }}
                      <!-- <span>{{ item.name }}</span> -->
                    </div>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="right" @contextmenu.prevent="menuPlayer()" v-if="!notshijuan">
          <div v-for="item in flieList" :key="item.id">
            <img
              :src="item.file_url"
              alt=""
              v-if="
                item.file_ext == 'png' ||
                item.file_ext == 'jpg' ||
                item.file_ext == 'doc' ||
                item.file_ext == 'png' ||
                item.file_ext == 'docx' ||
                item.file_ext == 'xls' ||
                item.file_ext == 'pdf' ||
                item.file_ext == 'xlsx'
              "
            />
            <video
              muted="muted"
              class="video"
              :src="item.file_url" 
              height="448px"
              width="800px"
              type="video/mp4"
              :poster="file_url"
              controls="controls"
              loop="-1"
              preload
              ref="startvideo"
              v-if="item.file_ext == 'mp4' || item.file_ext == 'rm'"
            ></video>
            <div
              class="mp3File"
              v-if="item.file_ext == 'mp3' || item.file_ext == 'm4a'"
            >
              <img
                src="../../assets/img/resFile (5).png"
                alt=""
                style="width: 74px"
              />
              <p>{{ item.title }}</p>
              <audio :src="item.file_url" controls></audio>
            </div>
          </div>
          <div class="mohu" ><div class="jindu" v-show="is_view != 0"></div></div>
          
          <p v-show="is_view != 0 && !noFileShow" class="jindutext">已预览{{ v_per }}%，完整内容可下载后查看哦！</p>
          <p v-show="is_view == 0 || noFileShow" class="jindutext">当前资源暂不支持预览，请您下载后查看</p>
          <!-- <div class="noFile" v-if="noFileShow"> -->
            <!-- <p v-if="noFileShow">当前文件暂无法提供预览，请您下载后查看</p> -->
          <!-- </div> -->
          <div class="downLoad">
            <p>{{ kejianTitle + suffix }}</p>
            <div class="choseDL">
              <div class="choseAgain">
                <div class="choseLists">
                  <div class="dLtop">
                    <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      class="quanxuan"
                      ><span v-trigger></span
                    ></el-checkbox>
                    <p>全部课件</p>
                  </div>

                  <div>
                    <el-checkbox-group
                      v-model="checkedClass"
                      @change="handleCheckedCitiesChange"
                    >
                      <div class="dLits">
                        <el-checkbox
                          v-for="item in kejianList"
                          :label="item"
                          :key="item.id"
                          :class="{ choseKj: kejianid == item.id }"
                        >
                          <div class="msg">
                            {{ item.title }}
                          </div>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
                <!-- <i class="el-icon-arrow-up"></i> -->
              </div>
              <span @click="downLoad">下载 </span>
            </div>
          </div>
        </div>
        <div class="right" v-if="notshijuan">
          <div class="cannotsee">
            <img src="../../assets/img/cannotsee.png" alt="">
            <p>试卷为保密资源，暂不提供预览</p>
          </div>
          <div class="downLoad">
            <p>{{ kejianTitle + suffix }}</p>
            <div class="alldown" @click="downLoadall" v-if="have_zip == 1">
              整包下载
            </div>
            <div class="choseDL">
              <div class="choseAgain">
                <div class="choseLists">
                  <div class="dLtop">
                    <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      class="quanxuan"
                      ><span v-trigger></span
                    ></el-checkbox>
                    <p>全部课件</p>
                  </div>

                  <div>
                    <el-checkbox-group
                      v-model="checkedClass"
                      @change="handleCheckedCitiesChange"
                    >
                      <div class="dLits">
                        <el-checkbox
                          v-for="(item,index) in kejianList"
                          :label="item"
                          :key="index"
                          :class="{ choseKj: kejianid == item.id }"
                        >
                          <div class="msg">
                            <img src="../../assets/img/ffzyb/vip.png" v-if="item.is_sf == 1">
                            {{ item.title }}
                          </div>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
                <i class="el-icon-arrow-up"></i>
              </div>
              <span @click="downLoad">下载 {{ idArr.length }}份</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="guanggao" v-if="bannerList.length > 0">
      <div class="banner">
        <el-carousel
          height="160px"
          autoplay="false"
          indicator-position="none"
          arrow="never"
        >
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img
              :src="item.file_url"
              alt="banner图"
              @click="advert(item.http_url)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div
      class="guanggao"
      v-if="bannerList.length <= 0"
      style="background: #f0f0f5; height: 40px"
    ></div>
    <!-- 下载登录弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      custom-class="login"
    >
      <LoginTc />
    </el-dialog>
    <!-- 付费资源包解锁弹窗 -->
    <div class="Gmoney">
      <el-dialog
        :visible.sync="dialogVisible_fufei"
        width="1000px"
        :before-close="fufeiClose"
        custom-class="moneyBox"
      >
        <h2>当前资源为<a>付费资源</a> ，需购买服务包后才可下载</h2>
        <div class="fangshi">
          <div class="left">
            <div class="pic">
              <img :src="xitongMsg.kf_file_url" alt="" />
            </div>
            <h4>添加客服免费领取试看</h4>
            <p><a>*</a>每位用户可领取一次</p>
          </div>
          <div class="center">
            <div class="top">
              <img src="../../assets/img/jiesuo_money.png" alt="" />
              <h3>下载解锁</h3>
            </div>
            <p>购买服务包后，包内所有资源都可以全部解锁，且可永久使用~</p>
            <a>查看资源包详情</a>
            <div class="moneyJs">购买服务包</div>
          </div>
          <div class="right">
            <div class="top">
              <img src="../../assets/img/jiesuo_number.png" alt="" />
              <h3>兑换码解锁</h3>
            </div>
            <p>已有兑换码老师可使用此方式进行解锁</p>
            <div class="numberJs" @click="dialogVisible_duihuan = true">
              输入兑换码
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 兑换码输入解锁框 -->
    <div class="duihuan">
      <el-dialog
        :visible.sync="dialogVisible_duihuan"
        width="360px"
        :before-close="duihuanClose"
        custom-class="duihuan"
      >
        <h2>兑换码解锁</h2>
        <div class="shuru">
          <input type="text" v-model="jsm" placeholder="请输入解锁兑换码" />
        </div>
        <div class="sureJs" @click="jsmJs">确认解锁</div>
      </el-dialog>
    </div>
    <!-- 下载完成后未添加企业微信的弹窗 -->
    <downEvmTc
      v-if="downQwShow"
      :zykf_file_url="zykf_file_url"
      :xzMsg="xzMsg"
      @qwtcClose="qwtcClose"
    ></downEvmTc>
    <!-- 限制下载条数的弹窗 -->
    <xzxxTc
      v-if="xzxxShow"
      :zykf_file_url="zykf_file_url"
      
      @xzxxClose="xzxxClose"
    ></xzxxTc>
    <!-- 服务包商品列表的弹窗 -->
    <fwbtj
      v-if="fwbtjShow"
      :choseGoodId="choseGoodId"
      :goods_lists="goods_lists"
      :caclose="true"
      @zixun="zixun"
      @choseGood="choseGood"
      @goyuyue="goyuyue"
      @closefwbtj ="closefwbtj"
    ></fwbtj>
    <!-- 问题咨询加客服弹窗 -->
    <wtzxTc
      v-if="zixunShow"
      :zykf_file_url="zykf1_file_url"
      @wtzxClose="wtzxClose"
    ></wtzxTc>

    <!-- 更新提醒弹窗 -->
    <gxtxTc
      v-if="gxtxShow"
      @gxtcClose="gxtcClose"
      :zykf_file_url="gxkf_file_url"
    >
    </gxtxTc>

    <!-- 助学宝注册弹窗 -->
    <div class="userinfoBox">
      <el-dialog
        title=""
        :visible.sync="dialogTableVisible"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        :show-close="true"
        center
        :width="lableWidth"
        v-if="dialogTableVisible"
      >
        <div class="chose" v-if="tap == 1">
          <!-- <h3>注册助学宝</h3> -->
          <div class="topBox">
            <el-form :model="form" :rules="formRules" ref="form" label-width="100px">
              <el-form-item label="您的职务" prop="shenfen_id">
                <el-select
                size="medium"
                  v-model="form.shenfen_id"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in zhiwuList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在地区" prop="adreess">
                <div class="adreess" ref="box">
                  <div class="indput">
                    <input
                      type="text"
                      @click="choseSSQ = !choseSSQ"
                      :value="form.adreess"
                      placeholder="请选择所在的地区"
                    />
                    <i class="el-icon-arrow-down jiantou" v-if="!choseSSQ"></i>
                    <i class="el-icon-arrow-up jiantou" v-if="choseSSQ"></i>
                  </div>
                  <div class="adreessBox" v-show="choseSSQ">
                    <div class="preBox box">
                      <div
                        class="list"
                        v-for="item in provincecodeList"
                        :key="item.code"
                        @click="chosePre(item.code, item.name)"
                        :class="{ select_color: form.provincecode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                    <div class="cityBox box" v-if="cityList.length > 0">
                      <div
                        class="list"
                        v-for="item in cityList"
                        :key="item.code"
                        @click="choseCity(item.code, item.name)"
                        :class="{ select_color: form.citycode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                    <div class="areaBox box" v-if="areaList.length > 0">
                      <div
                        class="list"
                        v-for="item in areaList"
                        :key="item.code"
                        @click="choseArea(item.code, item.name)"
                        :class="{ select_color: form.areacode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="所在学校" prop="school_title">
                <input v-model="form.school_title" placeholder="请填写学校全称，以便核发助学积分" />
              </el-form-item>
              <el-form-item label="您的姓名" prop="true_name">
                <input v-model="form.true_name" placeholder="请填写实名，以便核发助学积分" />
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <input v-model="form.phone" placeholder="真实手机号码，避免助学积分被冒领" />
              </el-form-item>
            </el-form>
            <div class="bgfi">
              <el-image 
                style="width: 100%; "
                :src="jybZcBg" 
                :preview-src-list="srcList">
              </el-image>
              <!-- <img :src="jybZcBg" alt=""> -->
              <!-- <img src="https://txrxdjstatic.idianjiao.com/uploadbx/img/20240809/1723175600049201.jpg" alt=""> -->
            </div>
          </div>
          <div class="changeLogin" @click="tap = 2;lableWidth='480px'">已有账号，前往登录</div>
          <div class="submitSet">
            <span @click="zhuce('form')">马上注册</span>
          </div>
        </div>
        <div class="chose chose2" v-if="tap == 2">
          <h3>登录点教助学宝</h3>
          <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm" label-width="100px">
            <el-form-item label="手机号" prop="loginPhone">
              <input v-model="loginForm.loginPhone" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="验证码" prop="verf">
              <input v-model="loginForm.verf" placeholder="请输入验证码" />
            </el-form-item>
            <div class="yzm"  v-if="!djsShow" @click="sendverf">获取验证码</div>
            <div class="yzm" v-if="djsShow">重新发送 {{ countdown }}s</div>
            <div class="changeLogin" @click="tap = 1;lableWidth='900px'">前往注册</div>
          </el-form>
          <div class="submitSet">
            <span @click="loginJyb('loginForm')">登录</span>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 注册助学宝后添加企业微信弹窗 -->
    <div class="addWx">
      <el-dialog
        :visible.sync="addwxShow"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        :show-close="true"
        center
        @close="closeQywx"
        width="400px"
      >
        <div class="qwBox">
          <h4 style="color:red">{{huanhang(textRed)}}</h4>
          <h4 style="white-space: pre-wrap;margin-top:20px;font-size:14px;">{{huanhang(text2)}}</h4>
          
          <div class="erweima">
            <img :src="bxQwfile" alt="">
          </div>
          <!-- <h4 style="white-space: pre-wrap;margin-top:8px;font-size:14px;">{{huanhang(text1)}}</h4> -->
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  islogin,
  info_kejianbao,
  info_kejian,
  url_kejian,
  plxz_url_arr,
  userinfo,
  banner,
  create_accountzysc,
  wxdlewm,
  upwxdl,
  sy_goodsjsm,
  qywx_status,
  download_nums,
  ffzyb_status,
  getgoodsweekpopup,
  closepopup,
  page_times,
  sysinfo,
  getgoodsbykejian,
  getgmstatusbykejian,
  getkfinfobyip,
  getgroupbuyuserinfo,
  accountexistbx,
  list_bxshenfen,
  regbx,
  pca,
  url_kejian_jyb,
  loginbx,
  isloginbx,
  sendverfbx,
  sysinfobx,
  getjyhdkefuworkwxbyipbx,
  qywx_statusbx,
} from "../../api/http";
import { timeStamp2String } from "../../utils/time";
import LoginTc from "../../layout/components/loginTc.vue";
import downEvmTc from "../../components/zydownevm/zydownevm.vue";
import xzxxTc from "../../components/xzxzTc/xzxzTc.vue";
import fwbtj from "../../components/fwbtj/fubtj.vue";
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
import gxtxTc from "../../components/gxtxTc/gxtx.vue";
export default {
  inject: ["reload"], //刷新页面
  props: ["xitongMsg", "kefuMsg"],
  components: {
    LoginTc,
    downEvmTc,
    xzxxTc,
    fwbtj,
    wtzxTc,
    gxtxTc,
  },
  data() {
    return {
      kjId: "", //压缩包的id
      gundongTop: 0, //资源中心跳转过来时的滚动条高度
      kejianbao_id: "", //课件包id
      title: "", //课件标题
      from_int: "", //判断资源是否为精选
      update_time: "", //更新时间
      view_nums: "", //浏览次数
      sub_info: "", //简介
      kejianList: [], //课件包包含的课件列表
      timeStamp2String, //时间戳转时间
      is_tj: 0, //是否为推荐
      activeNames: "1", //折叠面板默认打开值
      collapseFlag: false, //展示折叠或展开
      playFlag: true, //视频遮罩层是否显示
      file_url: "", //视频封面图，待定
      vedioPath: "", //视频地址
      checkAll: false, //全选是否选中
      checkedClass: [], //选中的课件数组
      isIndeterminate: true, //全选
      filePicList: [], //右侧要展示的内容组
      v_per: "", //右侧展示的内容百分比
      kejianTitle: "", //当前选择展示的课件详情名称
      suffix: "", //当前选择展示的课件详情类型
      kejianid: "", //当前选择展示的课件id，默认第一个
      wenjianid:'',//左侧选中的文件id
      noFileShow: false, //空图

      //下载内容
      idArr: [], //选中的课件组id
      urlArr: [], //选中的课件组下载链接数组

      //广告图
      nianji_ids: "", //年级id
      kemu_ids: "", //科目id
      bannerList: [], //广告图列表

      scrollHight: "", //视口高度
      zipfile_lists: [], //图片列表
      kjlist: [], ////抽出来课件
      flieList: [], //图片列表
      sc_status: "", //是否收藏
      loginStatus: "", //登录状态
      dialogVisible: false, //登录弹窗展示
      loginEvm: "", //扫码登陆二维码
      evmTimer: null, //扫码状态获取计时器

      //是否是搜索页跳转来的
      isSearch: false,

      // query参数相关
      bigTap: "", //同步资源主页传的大菜单值
      bigTapName: "", //同步资源跳转过来的大菜单名称
      fromPath: "", //跳转过来的路径
      routeurl: "", //路径
      routeName: "", //路径名

      bookTitle: "", //
      bookurl: "", //图书名
      mulu1title: "", //一级目录名
      mulu1url: "", //一级目录同步地址
      mulu2title: "", //二级目录名
      mulu2url: "", //二级目录同步地址
      mulu3title: "", //三级目录名
      mulu3url: "", //三级目录同步地址
      fenleiTitle: "", //分类名
      fenleiurl: "", //分类同步地址

      sjFlTitle: "", //试卷分类名
      sjFlurl: "", //试卷分类地址
      sjNjTitle: "", //试卷年级名
      sjNjurl: "", //试卷年级地址
      sjDqTitle: "", //试卷地区名
      sjDqurl: "", //试卷地区地址
      sjNfTitle: "", //试卷年份名
      sjNfurl: "", //试卷年份地址

      scFlTitle: "", //素材分类名
      scFlurl: "", //素材分类地址
      scTimeTitle: "", //素材时间名
      scTimeurl: "", //素材时间值地址

      is_sf: "", //是否收费
      is_pay: "", //是否支付
      gm_status: "", //是否购买

      goods_lists: [], //商品列表
      dialogVisible_fufei: false, //付费弹窗展示
      dialogVisible_duihuan: false, //兑换码弹窗展示
      jsm: "", //解锁码兑换码

      downQwShow: false,
      zykf_file_url: "", //资源客服二维码
      xzMsg:{},//下载完成弹窗相关信息
      xzMsg:{is_qw:1,type_id:'',baotype:'',kemu_id:'',nianji_id:'',},//下载完成弹窗所需相关

      pswd: "", //文件编辑密码
      gm_status2: "",
      xzxxShow: false, //限制下载条数弹窗

      fwbtjShow: false, //服务包推荐弹窗 付费的未购买时弹出
      zixunShow: false, //咨询客服1二维码弹窗
      zykf1_file_url: "", //资源客服1二维码
      choseGoodId: "", //服务包推荐弹窗选中的商品id

      gxtxShow: false, //更新提醒弹窗展示
      gxkf_file_url: "", //售后客服
      goods_id:'',//商品id

      pageTimer:null,//上报停留时长

      notshijuan:false,//试卷不可查看

      goodsweek_id:'',//周id

      is_view:'',//右侧能否查看
      account:'',//用户下载时需要的用户账号

      zhiwuList:[],//教研宝职务列表
      dialogTableVisible:false,
      choseSSQ: false, //省市区选择框的显示隐藏
      form:{
        phone:'',
        true_name:'',
        shenfen_id:'',
        school_title:'',
        provincecode:'',
        citycode:'',
        areacode:'',
        province:'',
        city:'',
        area:'',
        adreess:'',
      },
      formRules:{
        shenfen_id: [{ required: true, message: "请选择您的职务", trigger: "change" }],
        adreess: [{ required: true, message: "请选择您所在地区", trigger: "change" }],
        school_title: [{ required: true, message: "请填写学校全称", trigger: "change" }],
        true_name: [{ required: true, message: "请填写实名", trigger: "change" }],
        phone: [{ required: true, message: "请填写真实手机号码", trigger: "change" }],
      },
      provincecodeList: [], //省列表
      cityList: [], //市列表
      areaList: [], //区列表
      tap:1,//注册页面 登录页面 助学宝
      lableWidth:'900px',

      loginForm:{
        loginPhone:'',
        verf:'',
      },
      loginFormRules:{
        loginPhone: [{ required: true, message: "请填写手机号", trigger: "click" }],
        verf: [{ required: true, message: "请填写验证码", trigger: "click" }],
      },
      djsShow: false, //重新发送倒计时显示隐藏
      countdown: 60, //短信验证码再次发送倒计时
      dxTimer: null, //重新获取验证码倒计时

      jybZcBg:'',
      srcList:[],

      addwxShow:false,
      bxQwfile:'',
      text1:'',
      text2:'',
      textRed:'',
      bxSysinfo:{},
      
    };
  },
  created() {
    // console.log(this.huanhang('长按识别二维码，添加教研老师 /免费领取教研包/分享公益课程，得助学积分!'))
    console.log(this.$route.query, "query参数");
    if (this.$route.query.path) {
      localStorage.setItem("path", this.$route.query.path);
      this.routeName = this.$route.query.routeName;
      this.routeurl = this.$route.query.path;
      this.$emit("pathpath", this.routeurl);
    }
    this.bigTap = this.$route.query.bigTap;
    this.gundongTop = this.$route.query.gundongTop;
    this.kejianid = this.$route.query.id; //课件id
    this.fromPath = this.$route.query.path
      ? this.$route.query.path +
        "?from=res" +
        "&Top=" +
        this.gundongTop +
        "&bigTap=" +
        this.bigTap +
        "&page=" +
        this.$route.query.page +
        "&pageSize=" +
        this.$route.query.pageSize
      : ""; //跳转过来的页面路径
    //是否是搜索页 或首页跳转来的
    if (
      this.$route.query.path == "/" ||
      this.$route.query.path == "/resourceJx" ||
      this.$route.query.isSearch
    ) {
      this.routeurl = this.$route.query.path;
      this.isSearch = 1;
    } else if (this.$route.query.bigTap) {
      this.bigTapName = this.$route.query.bigTapName
        ? this.$route.query.bigTapName
        : ""; //跳转过来的大菜单名称
      this.bookTitle = this.$route.query.bookTitle
        ? this.$route.query.bookTitle
        : ""; //跳转过来的图书名
      this.mulu1title = this.$route.query.mulu1title
        ? this.$route.query.mulu1title
        : ""; //跳转过来的一级目录名
      this.mulu2title = this.$route.query.mulu2title
        ? this.$route.query.mulu2title
        : ""; //跳转过来的二级目录名
      this.mulu3title = this.$route.query.mulu3title
        ? this.$route.query.mulu3title
        : ""; //跳转过来的三级目录名
      this.fenleiTitle = this.$route.query.fenleiTitle
        ? this.$route.query.fenleiTitle
        : ""; //跳转过来的分类名
      this.sjFlTitle = this.$route.query.sjFlTitle
        ? this.$route.query.sjFlTitle
        : ""; //跳转过来的试卷分类名
      this.sjNjTitle = this.$route.query.sjNjTitle
        ? this.$route.query.sjNjTitle
        : ""; //跳转过来的试卷年级名
      this.sjDqTitle = this.$route.query.sjDqTitle
        ? this.$route.query.sjDqTitle
        : ""; //跳转过来的试卷地区名
      this.sjNfTitle = this.$route.query.sjNfTitle
        ? this.$route.query.sjNfTitle
        : ""; //跳转过来的试卷年份名
      this.scFlTitle = this.$route.query.scFlTitle
        ? this.$route.query.scFlTitle
        : ""; //跳转过来的素材分类名
      this.scTimeTitle = this.$route.query.scTimeTitle
        ? this.$route.query.scTimeTitle
        : ""; //跳转过来的素材时间名
      this.bookurl =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部";
      this.mulu1url =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部" +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title;
      this.mulu2url =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部" +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title +
        "&mulu2id=" +
        this.$route.query.mulu2id +
        "&mulu2title=" +
        this.$route.query.mulu2title;
      this.mulu3url =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        "0" +
        "&fenleiTitle=" +
        "全部" +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title +
        "&mulu2id=" +
        this.$route.query.mulu2id +
        "&mulu2title=" +
        this.$route.query.mulu2title +
        "&mulu3id=" +
        this.$route.query.mulu3id +
        "&mulu3title=" +
        this.$route.query.mulu3title;
      this.fenleiurl =
        this.fromPath +
        "&bookId=" +
        this.$route.query.bookId +
        "&bookTitle=" +
        this.$route.query.bookTitle +
        "&feleiDid=" +
        this.$route.query.feleiDid +
        "&fenleiTitle=" +
        this.$route.query.fenleiTitle +
        "&mulu1id=" +
        this.$route.query.mulu1id +
        "&mulu1title=" +
        this.$route.query.mulu1title +
        "&mulu2id=" +
        this.$route.query.mulu2id +
        "&mulu2title=" +
        this.$route.query.mulu2title +
        "&mulu3id=" +
        this.$route.query.mulu3id +
        "&mulu3title=" +
        this.$route.query.mulu3title;
      this.sjFlurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        "" +
        "&sjNjTitle=" +
        "全部" +
        "&sjDqId=" +
        "" +
        "&sjDqTitle=" +
        "" +
        "&sjNfId=" +
        "" +
        "&sjNfTitle=" +
        "全部";
      this.sjNjurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        this.$route.query.sjNjId +
        "&sjNjTitle=" +
        this.$route.query.sjNjTitle +
        "&sjDqId=" +
        "" +
        "&sjDqTitle=" +
        "" +
        "&sjNfId=" +
        "" +
        "&sjNfTitle=" +
        "全部";
      this.sjDqurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        this.$route.query.sjNjId +
        "&sjNjTitle=" +
        this.$route.query.sjNjTitle +
        "&sjDqId=" +
        this.$route.query.sjDqId +
        "&sjDqTitle=" +
        this.$route.query.sjDqTitle +
        "&sjNfId=" +
        "" +
        "&sjNfTitle=" +
        "全部";
      this.sjNfurl =
        this.fromPath +
        "&sjFlId=" +
        this.$route.query.sjFlId +
        "&sjFlTitle=" +
        this.$route.query.sjFlTitle +
        "&sjNjId=" +
        this.$route.query.sjNjId +
        "&sjNjTitle=" +
        this.$route.query.sjNjTitle +
        "&sjDqId=" +
        this.$route.query.sjDqId +
        "&sjDqTitle=" +
        this.$route.query.sjDqTitle +
        "&sjNfId=" +
        this.$route.query.sjNfId +
        "&sjNfTitle=" +
        this.$route.query.sjNfTitle;
      this.scFlurl =
        this.fromPath +
        "&scFlId=" +
        this.$route.query.scFlId +
        "&scFlTitle=" +
        this.$route.query.scFlTitle +
        "&scTimeId=" +
        "" +
        "&scTimeTitle=" +
        "全部";
      this.scTimeurl =
        this.fromPath +
        "&scFlId=" +
        this.$route.query.scFlId +
        "&scFlTitle=" +
        this.$route.query.scFlTitle +
        "&scTimeId=" +
        this.$route.query.scTimeId +
        "&scTimeTitle=" +
        this.$route.query.scTimeTitle;
    }

    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    console.log(this.$route.query.id);
    this.kjId = this.$route.query.id;
    //是否登录
    islogin({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res.retRes.login_status, "是否登录");
      this.loginStatus = res.retRes.login_status;
      if(this.loginStatus == 1){
        userinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) =>{
          const data = res.retRes;
          (this.nianji_ids = data.nianji_id)
          this.account = data.account;
        })
        getgoodsweekpopup({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          if (res.retRes == 1) {
            this.gxtxShow = true;
            this.gxkf_file_url = this.kefuMsg.qwkf_file_url;
          }
        });
        getgoodsbykejian({
          md5key: localStorage.getItem("md5key"),
          type:1,
          id:this.$route.query.id,
        }).then(res=>{
          console.log(res,"xin 商量列表")
          if (res.retRes.length != 0) {
            this.goods_lists = res.retRes.slice(0,2);
            this.goods_id = res.retRes[0].goods_id;
          }
        })
        
      }
    });
    //课件包详情
    info_kejian({
      md5key: localStorage.getItem("md5key"),
      id: this.$route.query.id,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "课件包详情");
        const data = res.retRes;
        this.title = data.title;
        this.kemu_ids = data.kemu_id;
        this.xzMsg.kemu_id = data.kemu_id
        this.is_sf = data.is_sf;
        this.xzMsg.type_id = data.type_id;
        // this.xzMsg.nianji_id = data.nianji_id;
        if(data.nianji_lists.length && data.nianji_lists.length == 1){
          this.xzMsg.nianji_id = data.nianji_id;
        }else{
          this.xzMsg.nianji_id = this.nianji_ids;
        }
        this.is_pay = data.is_pay;
        this.kejianTitle = data.title;
        this.suffix = data.suffix;
        this.gm_status = data.gm_status;
        this.gm_status2 = data.gm_status2;
        this.pswd = data.pswd;
        this.sc_status = data.sc_status;
        // this.goods_lists = data.goods_lists;
        // this.update_time = data.update_time;
        this.view_nums = data.viewCount;
        this.v_per = data.v_per;
        this.file_lists = data.file_lists;
        let obj = {};
        this.kjlist = this.file_lists.reduce((list, next) => {
          obj[next.title] ? "" : (obj[next.title] = true && list.push(next));
          return list;
        }, []);
        this.wenjianid = this.kjlist[0].id;
        console.log(this.kjlist, "12312323113");
        this.file_lists.forEach((item) => {
          if (item.title == this.kjlist[0].title) {
            this.flieList.push(item);
            if(item.file_ext == 'rar' || item.file_ext == 'zip'){
              this.noFileShow = true
            }else{
              this.noFileShow = false
            }
            this.is_view = this.flieList[0].is_view
          }
        });
        // this.choseKj(this.kjlist[0].title,this.kjlist[0].id,this.kjlist[0].file_ext)
        if(this.is_sf == 1 && (this.gm_status != 1 || this.is_pay !=1) && res.retRes.type_id == 2 && res.retRes.is_new == 1){
          this.notshijuan = true
        }else{
          this.notshijuan = false
        }
        this.choseKj(this.kjlist[0].title,this.kjlist[0].id,this.kjlist[0].file_ext)
        if(this.loginStatus == 1){
          getgmstatusbykejian({
            md5key: localStorage.getItem("md5key"),
            type:1,
            id:this.$route.query.id,
            goods_type:this.xzMsg.type_id == 1?3:this.xzMsg.type_id == 2?2:1,
            nianji_id:this.xzMsg.nianji_id
          }).then(res=>{
            console.log(res,"付费包支付状态")
            const bmsg = res.retRes;
            //如果是非课件试卷资源 且尊享包未购买全学年
            if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 0){
              this.xzMsg.baotype = 1;//推尊享包
            //如果是非课件试卷资源 且尊享包已购买全学年
            }else if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 1){
              this.xzMsg.baotype = 0;//推尊图书
            //如果是试卷资源 且试卷包未购买全学年
            }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 0){
              this.xzMsg.baotype = 2;//推尊图书
            //如果是试卷资源 且试卷包已购买全学年 且尊享包未购买全学年
            }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
              this.xzMsg.baotype = 1;//推尊享包
            //如果是试卷资源 且试卷包已购买全学年 且尊享包已购买全学年
            }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
              this.xzMsg.baotype = 0;//推尊图书
            //如果是课件资源 且课件包未购买全学年
            }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 0){
              this.xzMsg.baotype = 3;//推尊课件
            //如果是课件资源 且课件包已购买全学年 且尊享包未购买全学年
            }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
              this.xzMsg.baotype = 1;//推尊享包
            //如果是课件资源 且课件包已购买全学年 且尊享包已购买全学年
            }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
              this.xzMsg.baotype = 0;//推尊图书
            }
          })
        }
      }
    });
    sysinfobx({
      md5key: localStorage.getItem("md5key"),
    }).then(res=>{
      this.bxSysinfo = res.retRes;
      this.jybZcBg = res.retRes.reg_hb_file_url2;
      this.srcList.push(this.jybZcBg)
    })
  },
  mounted() {
    //点击某元素以外的任何区域
    document.addEventListener("click", this.dosome);
    //上报资源页停留
     page_times({
      table_name: "kejian",
      row_id: this.kejianid,
      times: 1,
    });
    //获取系统信息里的上报时长
    sysinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      const times = res.retRes.page_times2;
      //上报停留时长
      this.pageTimer = setInterval(() => {
        page_times({
          table_name: "kejian",
          row_id: this.kejianid,
          times: times,
        });
      }, times * 1000);
    });
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  beforeDestroy() {
     clearInterval(this.pageTimer);
    this.pageTimer = null;

    window.removeEventListener("scroll", this.handleScrollY, true);
    //点击某元素以外的任何区域
    document.addEventListener("click", this.dosome);
  },
  //自定义指令
  directives: {
    //进入页面点击全选按钮
    trigger: {
      inserted(el) {
        el.click();
      },
    },
  },
  methods: {
    //获取省市区数据
    getPca(){
      pca({
        type: "p",
      }).then((res) => {
        console.log(res, "省份数据 ");
        this.provincecodeList = res.retRes;
      })
    },
    //获取教研宝职务列表
    list_bxshenfen(){
      list_bxshenfen({md5key: localStorage.getItem("md5key"),}).then(res=>{
        this.zhiwuList = res.retRes;
      })
    },
    huanhang(str){
      var reg = /[/]/g;
      var a = str;
      var s  = a.replace(reg,"$&\r\n");
      return s.replace(/[/]/g,"")
    },
    zhuce(formName){
      console.log(this.form)
      const that = this
      this.$refs[formName].validate((valid) => {
        if(valid){
          regbx({
            md5key: localStorage.getItem("md5key"),
            phone:this.form.phone,
            true_name:this.form.true_name,
            shenfen_id:this.form.shenfen_id,
            school_title:this.form.school_title,
            provincecode:this.form.provincecode,
            citycode:this.form.citycode,
            areacode:this.form.areacode,
            province:this.form.province,
            city:this.form.city,
            area:this.form.area,
          }).then(res=>{
            if(res.retInt == 1){
              this.$message({
                message: "注册成功，可以下载啦！",
                type: "success",
              });
              this.dialogTableVisible = false;
              qywx_statusbx({
                kf_account:'',
                zxtype_id:2,
                phone:this.form.phone
              }).then(res=>{
                if(res.retRes.qywx_status != 1){
                  getjyhdkefuworkwxbyipbx({
                    zxtype_id:9
                  }).then(res=>{
                    that.bxQwfile  = res.retRes.kf_info.file_url;
                    if(that.form.shenfen_id == 601 ||that.form.shenfen_id == 602 ){
                      that.text1 = that.bxSysinfo.reg_ewm_msg1;
                      that.text2 = that.bxSysinfo.reg_ewm_msg2;
                      that.textRed = that.bxSysinfo.reg_ewm_msg2_red;
                    }else if(that.form.shenfen_id == 603){
                      that.text1 = that.bxSysinfo.reg_ewm_msg1_xz;
                      that.text2 = that.bxSysinfo.reg_ewm_msg2_xz;
                      that.textRed = that.bxSysinfo.reg_ewm_msg2_xz_red;
                    }else{
                      that.text1 = that.bxSysinfo.reg_ewm_msg1_ls;
                      that.text2 = that.bxSysinfo.reg_ewm_msg2_ls;
                      that.textRed = that.bxSysinfo.reg_ewm_msg2_ls_red;
                    }
                    that.addwxShow = true;
                  })
                }
              })
            }
          })
        }
      })
    },
    sendverf(){
      //电话号码正则验证，如果通过就发送验证码
      const reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const reg_yzm = /^\d{6}$/;
      if (this.loginForm.loginPhone.trim() == "") {
        this.$message.warning("请填写手机号!");
      } else if (!reg_tel.test(this.loginForm.loginPhone)) {
        this.$message.warning("手机号格式错误!");
      } else {
        //手机号码正常，发送短信验证码并倒计时60秒后才可重新发送
        sendverfbx({
          md5key: localStorage.getItem("md5key"),
          phone: this.loginForm.loginPhone
        }).then((res) => {
          if (res.retInt == 1) {
            this.dxTimer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 60) {
                this.countdown--;
                if (this.countdown !== 0) {
                  this.djsShow = true;
                } else {
                  this.djsShow = false;
                  this.countdown = 60;
                  clearInterval(this.dxTimer);
                }
              }
            }, 1000);
          }
        });
      }
    },
    loginJyb(formName){
      const that = this;
      this.$refs[formName].validate((valid) => {
        if(valid){
          loginbx({
            md5key: localStorage.getItem("md5key"),
            phone:this.loginForm.loginPhone,
            msg_verf:this.loginForm.verf,
          }).then(res=>{
            if(res.retInt == 1){
              this.$message({
                message: "登录成功，可以下载啦！",
                type: "success",
              });
               this.dialogTableVisible = false;
              qywx_statusbx({
                kf_account:'',
                zxtype_id:2,
                phone:that.loginForm.loginPhone,
              }).then(res=>{
                if(res.retRes.qywx_status != 1){
                  getjyhdkefuworkwxbyipbx({
                    zxtype_id:9
                  }).then(res=>{
                    that.bxQwfile  = res.retRes.kf_info.file_url;
                    if(that.form.shenfen_id == 601 || that.form.shenfen_id == 602 ){
                      that.text1 = that.bxSysinfo.reg_ewm_msg1;
                      that.text2 = that.bxSysinfo.reg_ewm_msg2;
                      that.textRed = that.bxSysinfo.reg_ewm_msg2_red;
                    }else if(that.form.shenfen_id == 603){
                      that.text1 = that.bxSysinfo.reg_ewm_msg1_xz;
                      that.text2 = that.bxSysinfo.reg_ewm_msg2_xz;
                      that.textRed = that.bxSysinfo.reg_ewm_msg2_xz_red;
                    }else{
                      that.text1 = that.bxSysinfo.reg_ewm_msg1_ls;
                      that.text2 = that.bxSysinfo.reg_ewm_msg2_ls;
                      that.textRed = that.bxSysinfo.reg_ewm_msg2_ls_red;
                    }
                    that.addwxShow = true;
                  })
                }
              })
            }
          })
        }
      })
    },
    closeQywx(){
      this.reload()
    },
    //关闭更新弹窗
    gxtcClose() {
      this.gxtxShow = false;
      closepopup({
        md5key: localStorage.getItem("md5key"),
      });
    },
    //去预约
    goyuyue(id,goodsweek_id) {
      page_times({
        table_name: "goods_ckdj",
        row_id: this.goods_id,
        table_name_p:'kejian',
        row_id_p:this.kejianid
      });
      console.log(id, this.kemu_ids);
      this.$router.push({
        name: "Dingzhi",
        query: {
          id: id,
          goodsweek_id:goodsweek_id,
          kemu_id: this.kemu_ids,
          type: "dy",
          gopay:1,
        },
      });
    },
    //选择商品
    choseGood(id,goodsweek_id) {
      this.choseGoodId = id;
      this.goodsweek_id = goodsweek_id
    },
    //点击商品咨询按钮
    zixun() {
      page_times({
        table_name: "goods_zxdj",
        row_id: this.goods_id,
        table_name_p:'kejian',
        row_id_p:this.kejianid
      });
      console.log(123);
      this.fwbtjShow = false;
      getkfinfobyip({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        this.zykf1_file_url = res.retRes.local_zxkf_info.file_url
      });
      this.zixunShow = true;
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose() {
      console.log(123);
      this.zixunShow = false;
      this.fwbtjShow = true;
    },
    //收藏
    getCollect() {
      const ids = [];
      ids.push(this.kjId);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 1,
        status: 1,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kjId,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    //取消收藏
    cancelCollect() {
      const ids = [];
      ids.push(this.kjId);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 1,
        status: 2,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kjId,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    menuPlayer() {
      console.log("禁止右键");
    },
    //监听滚动事件
    handleScrollY() {
      const downLoad = document.getElementsByClassName("downLoad")[0]; //需要定位的下载栏
      const banner = document.getElementsByClassName("guanggao")[0]; //广告图参照物
      const left = document.getElementsByClassName("left")[0]; //左侧课件列表
      const title1 = document.getElementsByClassName("title1")[0]; //资源数量标题
      const right = document.getElementsByClassName("right")[0]; //资源数量标题
      // left.style.height = document.body.clientHeight -0 + 'px'
      // this.scrollHight = document.body.clientHeight -85 + 'px'
      const picHeight =banner.getBoundingClientRect().top-window.innerHeight + 40 ;
      // console.log(banner.getBoundingClientRect().bottom,window.innerHeight)
      console.log(left.getBoundingClientRect().height,right.getBoundingClientRect().height)
      if (
        parseInt(banner.getBoundingClientRect().top) > window.innerHeight +20 && 
        banner.getBoundingClientRect().bottom > 0 
      ) {
        downLoad.style.position = "fixed";
      } else {
        downLoad.style.position = "absolute";
        downLoad.style.bottom = "0px";
      }

      if (
        title1.getBoundingClientRect().top < 40  && left.getBoundingClientRect().height < right.getBoundingClientRect().height
      ) {
        left.style.position = "fixed";
        left.style.top = "80px";
        right.style.marginLeft = "400px";
      } else if(title1.getBoundingClientRect().top > 40  ) {
        left.style.position = "static";
        right.style.marginLeft = "0px";
      }
      if (picHeight < 0) {
          left.style.top =80 + picHeight + "px";
        }
    },
    //折叠栏
    handleChange() {
      this.collapseFlag = !this.collapseFlag;
    },
    //全选按钮
    handleCheckAllChange(val) {
      this.checkedClass = val ? this.kejianList : [];
      this.isIndeterminate = false;
      console.log(this.checkedClass, "全选按钮");
      this.idArr = [];
      this.urlArr = [];
      this.checkedClass.forEach((item) => {
        this.idArr.push(item.id);
      });
      // console.log(this.idArr, "yaya");
      // plxz_url_arr({
      //   md5key: localStorage.getItem("md5key"),
      //   kejianbao_id: this.kejianbao_id,
      //   ids: this.idArr,
      // }).then((res) => {
      //   console.log(res, "xiazai链接数组");
      //   this.urlArr = res.retRes;
      // });
    },
    //单选和全选的联动
    handleCheckedCitiesChange(value) {
      console.log(this.checkedClass, "单选按钮");
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.kejianList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.kejianList.length;
      this.idArr = [];
      this.urlArr = [];
      this.checkedClass.forEach((item) => {
        this.idArr.push(item.id);
      });
      // console.log(this.idArr, "yaya");
      // plxz_url_arr({
      //   md5key: localStorage.getItem("md5key"),
      //   kejianbao_id: this.kejianbao_id,
      //   ids: this.idArr,
      // }).then((res) => {
      //   console.log(res, "xiazai链接数组");
      //   this.urlArr = res.retRes;
      // });
    },
    //选择课件，右侧展示
    choseKj(title, id,file_ext) {
      this.flieList = [];
      this.wenjianid = id;
      const topHeight =
        document.getElementsByClassName("beikeziyuan")[0].offsetHeight;
      //点击后回到顶部
      $(document).ready(function () {
        $(window).scrollTop(topHeight + 80);
      });
      //下载按钮再次固定底部
      const downLoad = document.getElementsByClassName("downLoad")[0]; //需要定位的下载栏
      const right = document.getElementsByClassName("right")[0]; //资源数量标题
      const left = document.getElementsByClassName("left")[0]; //左侧课件列表
      console.log(left.getBoundingClientRect().height,right.getBoundingClientRect().height)
      setTimeout(()=>{
        if(left.getBoundingClientRect().height>=right.getBoundingClientRect().height){
          console.log(1)
          downLoad.style.position = "absolute";
        }else {
          downLoad.style.position = " fixed";
          downLoad.style.bottom = "0px";
          console.log(2)
        }
      },100)
      
      
      //选择相同标题的图片展示
      this.file_lists.forEach((item) => {
        if (item.title == title) {
          this.flieList.push(item);
        }
      });
      this.is_view = this.flieList[0].is_view
      console.log(this.flieList);
      if(file_ext == 'zip' || file_ext == 'rar'){
        this.noFileShow = true
      }else{
        this.noFileShow = false
      }
    },
    //关闭服务包推荐弹窗
    closefwbtj(){
      this.fwbtjShow = false
    },
    //获取文件下载链接
    downLoad() {
      // console.log(new Date().getTime() - this.$route.query.time)
      const five =new Date().getTime() - this.$route.query.time
      // if (five > 300000) {
        isloginbx().then(res=>{
          if(res.retRes.login_status == 1){
            this.getDownUrl();
          }else{
            this.dialogTableVisible = false;
            this.list_bxshenfen();
            this.getPca();
            this.dialogTableVisible = true;
          }
        })
      // } else {
      //   this.getDownUrl();
        // accountexistbx({
        //   md5key: localStorage.getItem("md5key"),
        //   phone:this.account
        // }).then(res=>{
        //   if(res.retRes == 1){
        //     this.getDownUrl();
        //   }else{
        //     this.dialogTableVisible = false;
        //     this.list_bxshenfen();
        //     this.getPca();
        //     this.dialogTableVisible = true;
        //   }
        // })
      // }
    },
    //获取当前已选中课件的下载链接数组
    getDownUrl() {
      url_kejian_jyb({
        md5key: localStorage.getItem("md5key"),
        id: this.kejianid,
      }).then((res) => {
        if (res.retInt == 1) {
          let url = res.retRes.download_file_url;
          const a = document.createElement("a");
          a.href = url;
          a.download = res.retRes.title;
          a.style.display = "none";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          setTimeout(() => {
            this.$message.success("下载成功！");
          },1500)
        }
      });
    },
    //关闭企业微信弹窗
    qwtcClose() {
      this.downQwShow = false;
    },
    //跳转广告图
    advert(href) {
      window.open(href, "_blank");
    },
    //关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //关闭付费弹窗
    fufeiClose() {
      this.dialogVisible_fufei = false;
    },
    //关闭兑换码弹窗
    duihuanClose() {
      this.dialogVisible_duihuan = false;
    },
    //关闭下载限制弹窗
    xzxxClose() {
      this.xzxxShow = false;
    },
    //前往账号登录
    goLogin() {
      this.$router.push({
        name: "Login",
        query: {
          zhanghao: 1,
        },
      });
    },
    //兑换码解锁
    jsmJs() {
      console.log(this.jsm);
      if (!this.jsm) {
        this.$message({
          message: "请输入正确的兑换码！",
          type: "warning",
        });
      } else {
        sy_goodsjsm({
          md5key: localStorage.getItem("md5key"),
          numbers: this.jsm,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message.success("解锁成功！");
            this.reload();
          } else {
            this.$message({
              message: res.retErr,
              type: "warning",
            });
          }
        });
      }
    },
     //选择省
    chosePre(code, name) {
      console.log(code);
      this.form.provincecode = code;
      this.form.province = name + "/";
      this.form.citycode = "";
      this.form.city = "";
      this.form.areacode = "";
      this.form.area = "";
      this.areaList = [];
      pca({
        type: "c",
        pcode: this.form.provincecode,
      }).then((res) => {
        console.log(res, "城市数据 ");
        this.cityList = res.retRes;
      });
    },
    //选择市
    choseCity(code, name) {
      this.form.citycode = code;
      this.form.city = name + "/";
      this.form.areacode = "";
      this.form.area = "";
      pca({
        type: "a",
        pcode: this.form.citycode,
      }).then((res) => {
        console.log(res, "地区数据 ");
        this.areaList = res.retRes;
      });
    },
    //选择区
    choseArea(code, name) {
      this.form.areacode = code;
      this.form.area = name;
      this.choseSSQ = false;
      this.form.adreess = this.form.province + this.form.city + this.form.area;
    },
    dosome(e) {
      if (!this.$refs.box.contains(e.target)) {
        this.choseSSQ = false; //这句话的意思是点击其他区域关闭（也可以根据自己需求写触发事件）
      }
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  width: 100%;
  background-color: #f0f0f5;
  overflow: hidden;
  span {
    user-select: none;
  }
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
            white-space: wrap;

            p {
              width: 350px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .beikeziyuan {
      display: flex;
      align-items: center;
      background-color: #fff;
      .beike {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        margin-top: 20px;
        width: 1200px;
        // height: 150px;
        background-color: #fff;
        img {
          margin: 0px 25px 0 25px;
          width: 74px;
          // height: 64px;
        }
        .details {
          max-width: 800px;
          // padding-top: 20px;
          
          .title {
            display: flex;
            align-items: center;
            margin: 0;
            margin-bottom: 16px;
            span {
              display: inline-block;
              position: relative;
              top: 2px;
              margin-right: 10px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              color: #ffffff;
              line-height: 20px;
              text-align: center;
            }
            img {
              position: relative;
              top: 2px;
              margin: 0;
              margin-right: 10px;
              height: auto;
              width: 40px;
            }
            h3 {
              // margin-top: 22px;
              max-width: 695px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .money {
              display: flex;
              margin-left: 5px;
              img {
                position: relative;
                top: 2px;
                margin: 0;
                margin-right: 5px;
                width: 12px;
                height: 12px;
              }
              color: #11aaf9;
            }
          }
          .msg {
            padding: 0;
            // width: 700px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #626366;
            p {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              line-height: 30px;
              margin-bottom: 5px;
              font-size: 12px;
              overflow: hidden;
            }
            ul {
              li {
                margin-right: 15px;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .bottom {
              margin-top: 15px;
              margin-bottom: 15px;
              color: #939599;
              font-size: 12px;
              font-family: Microsoft YaHei;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
              .recNum {
                a {
                  color: red;
                }
              }
            }
          }
        }
      }
      .collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 60px;
        cursor: pointer;
        width: 100px;
        i {
          margin-bottom: 5px;
          font-size: 28px;
          color: #c8cacc;
        }
        p {
          font-size: 12px;
          color: #969799;
        }
      }
      .getsc {
        i {
          background-color: linear-gradient(-45deg, #7defcf, #05bc89);
          color: #05bc89;
        }
        p {
          color: #08a579;
        }
      }
    }
  }
  .content {
    margin: 0 auto;
    margin-bottom: 20px;

    width: 1200px;
    background-color: #fff;
    border: 1px solid #ccc;
    .title1 {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
      p {
        margin-left: 20px;
      }
      span {
        margin-right: 20px;
        color: #969799;
      }
    }
    .box {
      position: relative;
      display: flex;
      /deep/.el-checkbox__input {
        display: none;
      }
      .left {
        position: static;
        top: 0;
        width: 399px;
        // height: 78vh !important;
        max-height: 75vh;
        // border-right: 1px solid #ccc;
        border-radius: 1px solid #ccc;
        /deep/.el-checkbox {
          display: flex;
          align-items: center;
          // margin: 20px 0 20px 23px;
          margin-left: 20px;
          width: 360px;
          height: 107px;
          line-height: 56px;
          border-radius: 10px;
          .el-checkbox__label {
            display: flex;
            align-items: center;
            height: 56px;
            img {
              width: 59px;
              height: 67px;
            }
            .msg {
              display: inline-block;
              // padding: 20px 0;
              padding-left: 20px;
              width: 210px;
              white-space: pre-wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
          }
        }
        // /deep/.el-checkbox:first-child {
        //   // margin-top: 20px;
        // }
        /deep/.el-collapse-item__content {
          max-height: 67vh !important;
          overflow-y: scroll;
        }
        /deeo/.el-collapse-item__arrow{
          display: block !important;
        }
        ::-webkit-scrollbar {
          width: 4px;
        }
        ::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-button {
          background-color: #eee;
          display: none;
        }
        ::-webkit-scrollbar-corner {
          background-color: black;
        }
        .choseKj {
          margin-top: 10px;
          background: #ebfaf5;
          border: 1px solid #08a579;
          .msg {
            color: #08a579;
          }
        }
        /deep/.el-checkbox__inner::before {
          display: none !important;
        }
        /deep/.el-collapse-item__header {
          display: flex;
          justify-content: space-between;
          background-color: #f0f2f5;
          p {
            margin-left: 20px;
            width: 330px;
            color: #333333;
            font-weight: 900;
          }
          span {
            color: #969799;
            font-size: 12px;
          }
        }
        .quanxuan {
          margin: 0;
          margin-left: 20px;
          height: 45px;
        }
      }
      .right {
        position: relative;
        margin-left: 0px;
        width: 800px;
        border-left: 1px solid #ccc;
        min-height: 10px;
        padding-bottom: 60px;
        img {
          width: 100%;
        }
        .cannotsee{
          margin-bottom: 200px;
          text-align: center;
          img{
            margin-top: 20px;
            width: 400px;
          }
          p{
            color: #666;
            font-size: 16px;
          }
        }
        .mp3File {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          height: 448px;
          img {
            margin-top: 100px;
            width: 74px;
            height: 84px;
          }
          p {
            margin-top: 15px;
            margin-bottom: 60px;
            font-size: 16px;
            text-align: center;
          }
          audio {
            width: 600px;
          }
        }
        .noFile {
          height: 91%;
          // margin-top: 100px;
          p {
            width: 300px;
            margin: 0 auto;
            padding: 100px auto;
            font-size: 14px;
          }
        }
        .mohu{
          position: relative;
          .jindu {
            position: absolute;
            bottom: 0px;
            width: 800px;
            height: 50px;
            line-height: 50px;

            text-align: center;
            background-image: linear-gradient(
              180deg,
              hsla(0, 0%, 100%, 0),
              #fff 86%
            );
          }
        }
        
        .jindutext {
          margin-top: 100px;
          height: 250px;
          text-align: center;
          height: 60px;
          line-height: 60px;
          font-size: 16px;
          color: #999;
        }
        .downLoad {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: fixed;
          bottom: 0;
          width: 800px;
          height: 60px;
          background: #ffffff;
          border-top: 1px solid #dee0e3;
          border-bottom: 1px solid #dee0e3;
          border-left: 1px solid #dee0e3;
          p {
            margin-left: 20px;
            width: 500px;
            font-size: 14px;
            color: #646566;
            display: -webkit-box; //对象作为弹性伸缩盒子模型显示
            overflow: hidden; //溢出隐藏
            // -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
            -webkit-line-clamp: 1; //设置 块元素包含的文本行数
          }
          .choseDL {
            display: flex;
            position: relative;
            // display: inline-block;
            margin-right: 20px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            background: #08a579;
            // width: 120px;
            height: 40px;

            border-radius: 4px;
            cursor: pointer;
            .choseAgain {
              .choseLists {
                display: none;
                position: absolute;
                bottom: 40px;
                right: 00px;
                width: 400px;
                max-height: 600px;
                min-height: 100px;
                border: 1px solid #e6e6e6;
                background: #fff;
                border-radius: 10px;
                overflow-y: scroll;
                box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
                .dLtop {
                  display: flex;
                  justify-content: space-between;
                  margin-left: 10px;
                  margin-top: 12px;
                  padding-bottom: 10px;
                  border-bottom: 1px solid #e6e6e6;
                  p {
                    margin: 0;
                  }
                }
                .dLits {
                  margin: 10px 3px;
                  .el-checkbox {
                    display: flex;
                    align-items: center;
                    margin: 20px 10px;
                    .msg {
                      text-align: left;
                      width: 320px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }
                }
              }
              ::-webkit-scrollbar {
                width: 2px;
              }
              ::-webkit-scrollbar-track {
                background-color: #f5f5f5;
                -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
                border-radius: 5px;
              }
              ::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, 0.2);
                border-radius: 5px;
              }
              ::-webkit-scrollbar-button {
                background-color: #eee;
                display: none;
              }
              ::-webkit-scrollbar-corner {
                background-color: black;
              }
              i {
                display: inline-block;
                width: 40px;
              }
            }
            .choseAgain:hover {
              .choseLists {
                display: block;
              }
            }
            span {
              display: inline-block;
              width: 80px;
              // padding-right: 10px;
              // width: 80px;
              // border-left: 1px solid #74c3a5;
            }
          }
        }
        .downLoad:hover {
        }
      }
    }
  }
  .banner {
    margin: 0px auto;
    margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
  }
  .guanggao {
    // position: absolute;
    top: 1px;
    margin: 0 auto;
    // margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
    background: red;
    cursor: pointer;
    .banner {
      margin: 0px auto;
      width: 100%;
      .el-carousel {
        width: 100%;
        height: 160px;
        // border-radius: 20px;
        .el-carousel__item {
          width: 100%;
          height: 160px;
          img {
            width: 100%;
            height: 160px;
          }
        }
      }
    }
  }
  /deep/.el-dialog {
    border-radius: 20px;
    overflow: hidden;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    margin-right: 10px;
    color: #c0c1c5;
    font-size: 18px;
    font-weight: 600;
  }
  /deep/.el-dialog__headerbtn {
    right: 36px;
  }
  .login {
    text-align: center;
    .tcTop {
      margin-bottom: 32px;
      text-align: center;
    }
    .dlevm {
      margin: 0 auto;
      text-align: center;
      width: 240px;
      height: 240px;
      img {
        width: 240px;
        height: 240px;
      }
    }
    p {
      margin-top: 16px;
      margin-bottom: 35px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
    .gologin {
      margin: 0 auto;
      text-align: center;
      width: 400px;
      height: 60px;
      line-height: 60px;
      color: #333;
      font-size: 16px;
      background: rgba(242, 237, 237, 0);
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
    }
  }
  .Gmoney {
    /deep/.el-dialog {
    }
    h2 {
      text-align: center;
      font-size: 24px;
      a {
        color: #f6444e;
      }
    }
    .fangshi {
      display: flex;
      // justify-content: space-around;
      margin-top: 60px;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        margin-right: 100px;
        margin-left: 80px;
        .pic {
          width: 200px;
          height: 200px;
          img {
            width: 100%;
          }
        }
        h4 {
          margin-top: 10px;
          font-size: 16px;
          color: #333;
        }
        p {
          margin-top: 12px;
          font-size: 14px;
          color: #999999;
          a {
            color: #f6444e;
          }
        }
      }
      .center,
      .right {
        position: relative;
        width: 240px;
        height: 260px;
        background: #f5faf8;
        border: 2px solid #08a579;
        border-radius: 12px;
        .top {
          display: flex;
          margin: 22px 0 20px 26px;
          img {
            position: relative;
            top: 1px;
            margin-right: 5px;
            width: 20px;
            object-fit: contain;
          }
          h3 {
            font-size: 16px;
            color: #333;
          }
        }
        p {
          margin-left: 26px;
          font-size: 14px;
          width: 183px;
          color: #666;
          line-height: 22px;
        }
        a {
          display: inline-block;
          margin-left: 26px;
          margin-top: 12px;
          text-decoration: underline;
          color: #08a579;
        }
        .moneyJs,
        .numberJs {
          position: absolute;
          bottom: 26px;
          margin-left: 60px;
          text-align: center;
          line-height: 40px;
          width: 120px;
          height: 40px;
          color: #fff;
          font-size: 14px;
          background: #08a579;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      .center {
        margin-right: 40px;
      }
    }
  }
  .duihuan {
    /deep/.el-dialog__body {
      padding: 0 20px;
    }
    /deep/.el-dialog__header {
      padding-top: 10px;
    }
    h2 {
      margin-bottom: 40px;
      text-align: center;
      font-size: 18px;
      color: #333;
    }
    .shuru {
      margin: 0 auto;
      margin-bottom: 40px;
      width: 280px;
      height: 54px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      input {
        width: 270px;
        height: 52px;
        font-size: 14px;
        text-align: center;
        border: 0;
        outline: none;
      }
    }
    .sureJs {
      margin-left: 100px;
      margin-bottom: 38px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
      width: 120px;
      height: 40px;
      background: #08a579;
      border-radius: 4px;
      cursor: pointer;
    }
  }
  .userinfoBox {
    /deep/.el-radio__input.is-checked + .el-radio__label {
      color: #08a579 !important;
    }
    /deep/.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
      margin-bottom: 54px;
    }
    /* 选中后小圆点的颜色 */
    /deep/.el-radio__input.is-checked .el-radio__inner {
      background: #08a579 !important;
      border-color: #08a579 !important;
    }
    .chose {
      position: relative;
      margin-left: 40px;
      margin-bottom: 20px;
      cursor: pointer;
      width: 780px;
      .topBox{
        display: flex;
        // justify-content: space-between;
        .bgfi{
          margin-left: 120px;
          width: 240px;
          img{
            width: 100%;
          }
        }
      }
      h3 {
        // margin: 10px 0;
        margin: 0 30px 34px 0;
        text-align: center;
        color: #333;
      }
      .el-form {
        width: 360px;
        user-select: none;
      }
      .el-input {
        // width: 680px !important;
      }
      .el-select {
        // width: 680px !important;
      }
      /deep/.el-form-item__content {
        margin-left: 40px;
      }
      /deep/.el-form-item__label {
        // text-align: left;
        line-height: 40px;
      }
      /deep/.el-cascader .el-input {
        // width: 780px !important;
      }
      /deep/.el-select .el-input__inner{
        height: 42px !important;
        width: 237px;
      }
      /deep/.el-select .el-input .el-select__caret{
        position: absolute;
        right: 164px;
      }
      .indput {
        position: relative;
      }
      input {
        padding-left: 15px;
        color: #666;
        width: 220px;
        height: 40px ;
        border: 0;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        background: #fff;
        cursor: pointer;
      }
      .jiantou {
        position: absolute;
        top: 14px;
        right: 33px;
        color: #999;
        font-size: 15px;
      }
      .adreess {
        position: relative;
        .select_color {
          color: #08a579;
          font-weight: 600;
          i {
            color: #08a579;
          }
        }
        // .icon_style {
        //   transform: rotate(180deg);
        // }
        .adreessBox {
          display: flex;
          position: absolute;
          top: 40px;
          left: 0;
          z-index: 1000;
          background-color: #fff;
          box-shadow: 0px 0px 20px 4px #ccc;
          border-radius: 4px;
          transition: 1s;
          .box {
            margin-top: 10px;
            padding: 0px 15px 10px 40px;
            width: 170px;
            height: 250px;
            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
            overflow-y: scroll;
            .list {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              cursor: pointer;
            }
          }
          .preBox {
            border-right: 1px solid #ccc;
          }
          .cityBox {
            border-right: 1px solid #ccc;
          }
          ::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
      }
      p {
        margin: 20px 0;
        margin-bottom: 20px;
        color: #646566;
      }
      .shenfen{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        p{
          margin: 10px 0;
        }
      }
      .taps {
        display: flex;
        flex-wrap: wrap;
        .classRadio {
          display: flex;
          margin-right: 79px;
          .tips {
            position: relative;
            top: 2px;
            margin-right: 8px;
            width: 14px;
            height: 14px;
            border: 1px solid #cccccc;
            border-radius: 100%;
            line-height: 12px;
            text-align: center;
            span {
              display: inline-block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
              width: 9px;
              height: 9px;
              background-color: #fff;
              border-radius: 100%;
            }
          }
          .tips2 {
            border: 1px solid #08a579;

            span {
              background-color: #08a579;
            }
          }
          p {
            margin: 0;
          }
        }
      }
      .tab2 {
        .classRadio {
          margin-bottom: 10px;
        }
      }
      .changeLogin{
        // margin-top: 40px;
        text-align: center;
        font-size: 12px;
        color: #999;
      }
      .submitSet {
        margin: 0 auto;
        margin-top: 18px;
        width: 120px;
        height: 40px;
        background: #08a579;
        color: #fff;
        border-radius: 6px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
    .chose2{
      position: relative;
      margin-left: 40px;
      margin-bottom: 20px;
      cursor: pointer;
      width: 380px;
      /deep/.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
          margin-bottom: 24px;
        }
      h3 {
        // margin: 10px 0;
        margin: 0 30px 34px 0;
        text-align: center;
      }
      .el-form {
        width: 380px;
        user-select: none;
      }
      .el-input {
        width: 380px;
      }
      .el-select {
        width: 380px;
      }
      /deep/.el-form-item__content {
        margin-left: 40px;
      }
      /deep/.el-form-item__label {
        // text-align: left;
      }
      /deep/.el-cascader .el-input {
        width: 380px;
      }
      .el-select .el-input__inner{
        height: 36px;
      }
      .indput {
        position: relative;
      }
      input {
        padding-left: 15px;
        color: #666;
        width: 220px;
        height: 40px;
        border: 0;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        outline: none;
        background: #fff;
        cursor: pointer;
      }
      .yzm{
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 12px;
        color: #08a579;
        bottom: 115px;
        right: 54px;
        user-select: none;
      }
    }
    /deep/.el-dialog--center {
      border-radius: 10px;
      // padding-bottom: 80px;
    }
    /deep/.el-dialog__header {
      padding: 0;
      padding-top: 20px;
    }
  }
  .addWx{
    /deep/.el-dialog--center .el-dialog__body{
      padding: 0px 25px 30px;
    }
    .qwBox{
      margin: 0 auto;
      text-align: center;
      width: 270px;
      h4{
        font-size: 16px;
        color: #333;
        // width: 200px;
        text-align: center;
        line-height: 28px;
      }
      .erweima{
        margin-top: 10px;
        margin-bottom: 10px;
        width: 270px;
        // height: 240px;
        text-align: center;
        img{
          width: 200px;
        }
      }
    }
  }
}
//下面的style为了处理多选框初始的样式问题
</style>

<style lang="less">
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #ccc !important;
  background-color: #08a579 !important;
}
.el-checkbox__inner {
  margin-left: 10px !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #333 !important;
}
.el-checkbox__inner:hover {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fff !important;
  color: #fff !important;
  width: 14px;
  height: 14px;
}
</style>